<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>AI语音助手</title>  
    <link rel="stylesheet" href="styles.css">  
</head>  
<body>  
    <div class="container">  
        <h1>AI语音助手</h1>  

        <!-- 语音对话模块 -->  
        <div id="voiceSection" class="section">  
            <h2>语音对话</h2>  
            <button id="startButton">启动语音识别</button>  
            <button id="stopButton" style="display:none;">停止语音识别</button>  
            <div id="statusMessage" style="display:none;">正在识别语音...</div>  
            <audio id="audioPlayback" controls></audio>  
        </div>  

        <!-- 文字对话模块 -->  
        <div id="textSection" class="section">  
            <h2>文字对话</h2>  
            <textarea id="textInput" rows="4" placeholder="输入你的问题..."></textarea>  
            <button id="sendTextButton">发送</button>  
            <div id="chatBox"></div>  
            <div id="result"></div>  
        </div>  
    </div>  
    <script src="script.js"></script>  
    <script>  
        document.getElementById('sendTextButton').addEventListener('click', async () => {  
            const userQuestion = document.getElementById('textInput').value;  
            const resultDiv = document.getElementById('result');  

            if (!userQuestion.trim()) {  
                alert('请输入问题');  
                return;  
            }  

            try {  
                const response = await fetch('sk-819fa5023a194370b12e7a56e3cf28d6', {  
                    method: 'POST',  
                    headers: {  
                     'Content-Type': 'application/json'  
                   },  
                    body: JSON.stringify({ question: userQuestion })  
                });  

                const result = await response.json();  

                // 检查返回结果的成功状态  
                if (result.success) {  
                    // 显示识别结果  
                    resultDiv.innerText = '回答: ' + result.answer;  
                } else {  
                    resultDiv.innerText = '回答失败: ' + result.message;  
                }  
            } catch (error) {  
                console.error('发生错误:', error);  
                resultDiv.innerText = '发生错误: ' + error.message;  
            }  
        });  
    </script>  
</body>  
</html>